<!-- 新闻组件 -->
<template>
  <div
    class="newsview"
    :style="{ 'background-color': config.ConfigData.bgcolor }"
  >
    <div v-for="(item, index) in config.ConfigData.items" :key="index">
      <div class="cell" v-if="index < 3">
        <div class="newcontent">
          <div class="title">{{ item.title }}</div>
          <div class="date">{{ item.publishdate }}</div>
        </div>
        <img class="img" :src="item.defaultimage | getgalleryImg('w450')" />
      </div>
    </div>
    <div class="more" v-if="config.ConfigData.items.length > 3">查看更多</div>
  </div>
</template>

<script>
export default {
  name: "NewsCopt",
  props: {
    config: Object
  },
  data() {
    return {};
  },
  methods: {
    ngtdetail(sysno) {
      //wepy.navigateTo({ url: `/pages/news/detail?sysno=${sysno}` });
    },
    ngtnews() {
      let sysnos = [];
      this.config.ConfigData.items.map(e => sysnos.push(e.topicsysno));
      // wepy.navigateTo({
      //   url: `/pages/news/news?topsysnos=${sysnos.toString()}`
      // });
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.newsview {
  padding: 0 5px;
  .cell {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 95px;
    width: 100%;
    border-bottom: 1px rgba(239, 239, 239, 1) solid;
    .newcontent {
      height: 70px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        overflow: hidden;
        max-width: 226.5px;
        height: 37px;
        font-size: 14px;
        font-family: "PingFang-SC-Medium";
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .date {
        overflow: hidden;
        max-width: 266.5px;
        height: 20px;
        font-size: 10px;
        font-family: "PingFang-SC-Medium";
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
        line-height: 20px;
      }
    }
    .img {
      overflow: hidden;
      width: 95px;
      height: 70px;
      background-color: #efefef;
    }
    .separator {
      position: absolute;
      bottom: 0.5px;
      width: 92%;
      height: 0.5px;
      z-index: 10;
      background-color: #efefef;
    }
  }
  .more {
    height: 35px;
    color: rgba(153, 153, 153, 1);
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
    line-height: 35px;
  }
}
</style>
